<template>
	<!-- 针对不同机型留白 -->
	<view class="top" ref="top" :style="{
		height: menuButton.top * 2 + 'rpx',
	}">
	</view>
	<view class="search searchPosi" @tap="gotoSearch" :style="{'top': menuButton.top * 2 + 'rpx','height': menuButton.height * 2 + 4 + 'rpx'
	}">
		<view class='searchInput' :style="{'width': `calc(100% - 100rpx - ${menuButton.width * 2}rpx)`, }"><u-search :shape="'round'" :show-action="false" placeholder='搜商品' disabled></u-search>
		</view>

	</view>
	<view class="bai" :style="{'top': menuButton.top * 2 + menuButton.height * 2  + 'rpx',}"></view>
	<!-- 顶部首页类型card -->
	<view class="topHeader" :style="{'top': menuButton.top * 2 + menuButton.height * 2 + 14 +'rpx',
	}">
		<view class="topCard">
			<view class="item" @click="typeClick('1')" :class="active == '1'?'activeStyle1':''">
				<view class="icon icon1">
					<image src="../../static/home/icon1.png"></image>
				</view>
				<text>找装修案例</text>
			</view>
			<view class="item" @click="typeClick('2')" :class="active == '2'?'activeStyle2':''">
				<view class="icon icon2">
					<image src="../../static/home/icon2.png"></image>
				</view>
				<text>找设计师</text>
			</view>
			<view class="item" @click="typeClick('3')" :class="active =='3'?'activeStyle3':''">
				<view class="icon icon3">
					<image src="../../static/home/icon3.png"></image>
				</view>
				<text>找工人</text>
			</view>
			<view class="item" @click="typeClick('4')" :class="active == '4'?'activeStyle4':''">
				<view class="icon icon4">
					<image src="../../static/home/icon4.png"></image>
				</view>
				<text>逛家居</text>
			</view>
		</view>
	</view>



	<!-- 找装修案例 -->
	<view class="conterScroll" v-if="active == '1'"
		:style="isFixed ? {'top': menuButton.top * 2 + menuButton.height * 2 + 14 +'rpx'} : {'top': menuButton.top * 2 + menuButton.height * 2 + 250 +'rpx'}">
		<findCases ref="findCasesRef" :isFixed="isFixed"
			:top='isFixed?menuButton.top * 2 + menuButton.height * 2 + 14 :menuButton.top * 2 + 16 + menuButton.height * 2 + 250' />
	</view>
	<!-- <view class="conterScroll" v-if="active == '1'" :class="{'fixed': isFixed}"
		:style="isFixed?{'top': navHeight + 20 + 80  +'rpx',}:''">
		<findCases ref="findCasesRef" />
	</view> -->
	<!-- 找设计师 -->
	<view class="conterScroll" v-if="active == '2'"
		:style="isFixed ? {'top': menuButton.top * 2 + menuButton.height * 2 + 14 +'rpx'} : {'top': menuButton.top * 2 + menuButton.height * 2 + 250 +'rpx'}">
		<designerList ref="designerListRef" :isFixed="isFixed"
			:top='isFixed?menuButton.top * 2 + menuButton.height * 2 + 14 :menuButton.top * 2 + 16 + menuButton.height * 2 + 250' />
	</view>


	<!-- 找工人 -->
	<view class="conterScroll" v-if="active == '3'"
		:style="isFixed ? {'top': menuButton.top * 2 + menuButton.height * 2 + 14 +'rpx'} : {'top': menuButton.top * 2 + menuButton.height * 2 + 250 +'rpx'}">
		<findWorkers ref="findWorkersRef" :isFixed="isFixed"
			:top='isFixed?menuButton.top * 2 + menuButton.height * 2 + 14 :menuButton.top * 2 + 16  + menuButton.height * 2 + 250' />
	</view>

	<!-- 找工人 -->
	<!-- 	<view class="conterScroll" v-if="active == '4'">
		<view class="nullData">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
			<text>暂无数据</text>
		</view>
	</view> -->
	<!-- 逛家居 -->
	<view class="conterScroll1" v-if="active == '4'"
		:style="isFixed ? {'top': menuButton.top * 2 + menuButton.height * 2 + 14 +'rpx'} : {'top': menuButton.top * 2 + menuButton.height * 2 + 250 + 10 +'rpx'}">
		<homeFurnishings ref="homeFurnishingsRef" :type="'list'" :isFixed="isFixed"
			:top='isFixed?menuButton.top * 2 + menuButton.height * 2 + 14 :menuButton.top * 2 + 16 + menuButton.height * 2 + 250' />
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage,
		onShareTimeline,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted
	} from 'vue';
	import findCases from '../../components/findCases/index.vue';
	import designerList from '../../components/designerList/index.vue';
	import findWorkers from '../../components/findWorkers/index.vue';
	import homeFurnishings from '@/components/homeFurnishings/index.vue'
	const active = ref('1') //默认选择第一个
	//吸顶设置
	const scrollTop = ref(0)
	const isFixed = ref(false)
	const menuButton = ref(uni.getMenuButtonBoundingClientRect())
	onPageScroll((e) => {
		console.log("获取页面滚动距离", e)
		scrollTop.value = e.scrollTop;
		//当距离大于90的时候吸顶
		if (scrollTop.value > 120) {
			isFixed.value = true;
		} else {
			isFixed.value = false;
		}
	})
	onLoad((option) => {
		console.log(option.active)
		if (option.active) {
			active.value = option.active
			console.log('选中', active.value)
		}
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})

	})

	const findCasesRef = ref(null)
	const designerListRef = ref(null)
	const findWorkersRef = ref(null)
	const homeFurnishingsRef = ref(null)
	//发送给朋友
	onShareAppMessage((res) => {
		if (active.value) {
			const url = '/pages/home/index?share=1&?active=' + active.value;
			uni.setStorageSync('isShare', '1');
			return {
				title: '智装通',
				type: 0,
				path: url,
				imageUrl: 'https://img.zhizhuangtong.com/project_media/img/xcx/khd/homeShare.jpeg',
			}
		}
	})

	//分享到朋友圈
	onShareTimeline((res) => {
		if (active.value) {
			uni.setStorageSync('isShare', '1');
			const url = '/pages/home/index?share=1&?active=' + active.value;
			return {
				title: '智装通',
				type: 0,
				path: url,
				imageUrl: 'https://img.zhizhuangtong.com/project_media/img/xcx/khd/homeShare.jpeg',

			}
		}
	})



	onReachBottom(() => {
		if (active.value == '1' && findCasesRef.value.hasMoreData) {
			// console.log('111触底加载更多数据...');
			findCasesRef.value.queryList();
		}

		if (active.value == '2' && designerListRef.value.hasMoreData) {
			// console.log('2222触底加载更多数据...');
			designerListRef.value.queryList();
		}
		if (active.value == '3' && findWorkersRef.value.hasMoreData) {
			// console.log('3333触底加载更多数据...');
			findWorkersRef.value.queryList();
		}
		if (active.value == '4' && homeFurnishingsRef.value.hasMoreData) {
			// console.log('3333触底加载更多数据...');
			homeFurnishingsRef.value.queryList();
		}
	});
	onPullDownRefresh(() => {
		console.log('下拉刷新触发')
		wx.showLoading({
			title: '加载中',
			mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
			duration: 1000, // 显示时间，单位毫秒，默认1500

		});

		setTimeout(() => {
			if (active.value == '1') {
				findCasesRef.value.update()
			} else if (active.value == '2') {
				designerListRef.value.update()
			} else if (active.value == '3') {
				findWorkersRef.value.update()
			} else {
				homeFurnishingsRef.value.update()
			}
			wx.hideLoading();
			uni.stopPullDownRefresh();
		}, 1000);
	})

	// 顶部卡片点击
	const typeClick = (code) => {
		console.log(code)
		active.value = code
	}
	// 判断设计师审核状态
	const PostType = async () => {
		const res = await designType({})
		if (res.code === 1) {
			status.value = res.data.design.audit_status
		} else {
			uni.$u.toast(res.data.msg);
		}
	}


	//查询
	const gotoSearch = () => {
		uni.navigateTo({
			url: '/pages/find/homeFurnishSearchHistory/index'
		});
	}
</script>


<style lang="less" scoped>
	.searchPosi {
		position: fixed;
		z-index: 999999;
		background-color: #fff;
		width: 100%;
		justify-content: flex-start;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;

		.searchInput {
			width: calc(100% - 60rpx - 180rpx);
			height: 60rpx;

		}
	}

	.bai {
		height: 8px;
		background-color: #fff;
		width: 100vw;
		position: fixed;
		z-index: 9999;
		left: 0;
	}

	.fixed {
		position: fixed !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 999 !important;
	}

	.top {
		width: 100%;
		// background: rgba(254, 172, 94, 0.4);
		background-color: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
	}


	.topHeader {
		width: 100%;
		background-color: #fff;
		position: absolute;
		z-index: 1;
		display: flex;
		align-content: flex-start;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		.topCard {
			width: 100%;
			padding: 26rpx 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;

			.item {
				height: 100%;
				position: relative;
				flex: 1;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.icon {
					width: 122rpx;
					height: 122rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					border: 2rpx solid #FFFFFF;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					margin-bottom: 15rpx;

					image {
						max-width: 68rpx;
						max-height: 68rpx;
					}
				}

				.icon1 {
					background: linear-gradient(#FF763E,#FFA645);
				}

				.icon2 {
					background: linear-gradient(#5858FF ,#8C76FD );
				}

				.icon3 {
					background: linear-gradient(#3787FE ,#63C1FF);
				}

				.icon4 {
					background: linear-gradient(#30CAA3,#61E4BE);
				}

				text {
					// width: 100%;
					text-align: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					padding: 8rpx 0;
					font-style: normal;
					text-transform: none;
				}
			}

			.activeStyle1 {
				text {
					border-radius: 55px;
					font-weight: 500;
					font-size: 26rpx;
					position: relative;
					box-sizing: border-box;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						bottom: 8rpx;
						width: 100%;
						z-index: -1;
						height: 12rpx;
						background: #F8BB77 ;
						border-radius: 6rpx;
					}
				}
			}

			.activeStyle2 {
				text {
					border-radius: 55px;
					font-weight: 500;
					font-size: 26rpx;
					position: relative;
					box-sizing: border-box;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						bottom: 8rpx;
						width: 100%;
						z-index: -1;
						height: 12rpx;
						background: #B1A8FF;
						border-radius: 6rpx;
					}
				}
			}

			.activeStyle3 {
				text {
					border-radius: 55px;
					font-weight: 500;
					font-size: 26rpx;
					position: relative;
					box-sizing: border-box;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						bottom: 8rpx;
						width: 100%;
						z-index: -1;
						height: 12rpx;
						background: #88CAFF;
						border-radius: 6rpx;
					}
				}
			}

			.activeStyle4 {
				text {
					border-radius: 55px;
					font-weight: 500;
					font-size: 26rpx;
					position: relative;
					box-sizing: border-box;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						bottom: 8rpx;
						width: 100%;
						z-index: -1;
						height: 12rpx;
						background: #92E4A5;
						border-radius: 6rpx;
					}
				}
			}

		}
	}

	.conterScroll {
		position: absolute;
		top: 410rpx;
		// border-radius: 20rpx 20rpx 0 0;
		// padding-top: 414rpx;
		z-index: 1;
		width: 100%;
		min-height: calc(100vh - 414rpx);
		// overflow-y: auto;
		background: #ffffff;

	}

	.conterScroll1 {
		position: absolute;
		top: 410rpx;
		// border-radius: 20rpx 20rpx 0 0;
		// padding-top: 414rpx;
		z-index: 1;
		width: 100%;
		min-height: calc(100vh - 414rpx);
		// overflow-y: auto;
		background: #f3f3f3;

	}
</style>